<template>
  <div id="vheader">
    <div class="collapse-btn">
      <img src="@/assets/img/dapeng.png" style="cursor: pointer" />
      <span class="logo">
        大鹏教育 | 运营系统
        <!-- <span class="msg"></span> -->
        <span class="borders"></span>
      </span>
      <span class="toggle-button" @click="toggleCollapse">
        <i
          :class="['iconfont', showMenu ? arrowLeft : arrowRight]"
          @click="setAside"
        ></i
      ></span>
    </div>
    <div class="right nav text_right">
      <el-dropdown trigger="click" if="userInfo">
        <span class="el-dropdown-link">
          <img
            :src="headImg"
            :onerror="errImg('defPic.png')"
            class="img-circle"
          />
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item
            icon="fa fa-user"
            @click.native="changeView('userCenter')"
          >
            个人中心
          </el-dropdown-item>
          <el-dropdown-item icon="fa fa-sign-out" @click.native="signOut">
            退出登录
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <!-- 2.0屏蔽信息提醒 -->
      <el-badge value="" class="item" @click.native="goToInteract">
        <i class="el-icon-message-solid"></i>
      </el-badge>
      <div value="" class="documentation">
        <a
          title="使用文档"
          href="https://www.yuque.com/ht7etv/vxkbpt/zo220k"
          target="_blank"
          ><i class="fa fa-question-circle"></i> 使用文档</a
        >
      </div>
    </div>
  </div>
</template>

<script>
// import { signOutToLogin } from '@utils/public'
export default {
  name: 'vheader',
  msg: '公共头部',
  data() {
    return {
      showMenu: true,
      arrowRight: 'fa fa-bars',
      arrowLeft: 'fa fa-bars',
      headImg: ''
    }
  },
  computed: {
    uerInfo() {
      return this.$store.state.user
    }
  },
  mounted() {
    this.headImg = this.uerInfo.avatar
  },
  methods: {
    toggleCollapse() {
      this.isCollapse = !this.isCollapse
    },
    // 照片没有的情况下，显示默认图片*/
    errImg(defaultImg) {
      return "this.src='" + require('@assets/img/' + defaultImg) + "'"
    },
    /* 点击折叠按钮*/
    setAside() {
      this.showMenu = !this.showMenu
      this.$emit('setAside', this.showMenu)
    },
    /* 跳转页面 */
    changeView(name) {
      this.$router.push({ name: name })
    },
    /* 跳转到互动消息页面 */
    goToInteract() {
      let query = {
        mId: 2188
      }
      this.$router.push({
        name: 'interactManage',
        query: query
      })
    },
    /* 退出 */
    signOut() {
      // signOutToLogin()
    }
  }
}
</script>

<style lang="less">
#vheader {
  width: 100%;
  min-width: 900px;
  height: 44px;
  line-height: 44px;
  background: rgba(98, 196, 238, 1);
  position: fixed;
  z-index: 2000; //原：1600
  .collapse-btn {
    padding-left: 20px;
    float: left;

    .logo {
      font-size: 20px;
      font-family: PingFangSC-Medium, PingFangSC;
      font-weight: 500;
      color: rgba(255, 255, 255, 1);
      line-height: 20px;
      position: relative;
      padding-left: 5px;

      .borders {
        width: 2px;
        height: 16px;
        color: #fff;
        position: absolute;
        top: 0;
        left: 54%;
        z-index: 999;
      }
      // .line {
      //   margin-left: 2px;
      // }
      // .msg {
      //   padding-left: 10px;
      //   font-size: 18px;
      //   font-weight: 500;
      // }
    }
    .toggle-button {
      margin-left: 15px;
      font-size: 14px;
      // font-weight: 600;
      // line-height: 23px;
      color: #fff;
      text-align: center;
      letter-spacing: 0.2em;
      cursor: pointer;
    }
  }

  .head-logo {
    float: left;
    margin: 7px 0 0 20px;
  }

  i.iconfont {
    margin-right: 20px;
    position: absolute;
    top: 46%;
    transform: translateY(-50%);
  }

  .right {
    float: right;
  }

  .nav {
    width: 35%;

    .el-dropdown {
      float: right;
      margin: 0 30px;
      cursor: pointer;

      .img-circle {
        width: 20px;
        height: 20px;
        vertical-align: -4px;
        border-radius: 50%;
      }
    }

    .el-badge {
      float: right;
      font-size: 20px;
      color: #fff;
      cursor: pointer;
      // i {
      //   vertical-align: 2px;
      // }

      .el-badge__content {
        height: 13px;
        line-height: 13px;
        background: #ff8c00;
        border-radius: 3px;
        border: none;
        padding: 0 3px;

        &.is-fixed {
          top: 16px;
          right: 7px;
        }
      }
    }
    .documentation {
      position: absolute;
      top: 0;
      right: 150px;
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFangSC;
      font-weight: 500;
      a {
        color: rgba(255, 255, 255, 1);
      }
    }
  }
}

.nav > ul {
  padding-right: 50px;
}

.nav > ul > li {
  display: inline-block;
  width: 120px;
  text-align: center;
  height: 50px;
  position: relative;
  line-height: 50px;
  /*margin-top: 15px;*/
  box-sizing: border-box;
  box-shadow: -10px 0px 15px #034c6a inset, 0px -10px 15px #034c6a inset,
    10px 0px 15px #034c6a inset, 0px 10px 15px #034c6a inset;
  border-radius: 5px;
}

.nav > ul > li:hover {
  box-shadow: none;
  background-color: #034c6a;
  box-sizing: border-box;
}

.nav > ul > li i {
  width: 16px;
  height: 16px;
  display: inline-block;
  position: relative;
  top: 3px;
  margin-right: 5px;
}

.nav > ul > li > a {
  color: deepskyblue;
  display: block;
  font-size: 14px;
}
</style>
